<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bodymovin/4.13.0/bodymovin.min.js"></script>
  <script src="./js/ResLoad.polyfill.js"></script>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div id="app">
    <div class="page0" v-if="page === 0">
      <div class="progress">
        <div class="progressbar"></div>
      </div>
      <div class="progress-txt">加载中。。。</div>
    </div>
    <!-- page1 -->
    <div class="page1" v-if="page === 1">
      <img class="bgimg" src="./H5/page1.png">
      <div class="animat">
        <div id="p1_circle"></div>
        <div id="p1_wave"></div>
        <div id="p1_light"></div>
        <div id="p1_title1"></div>
        <div id="p1_title2"></div>
        <div id="p1_topdot"></div>
        <div id="p1_t2018"></div>
      </div>
      <a class="toPage2" @click.prevent="toPage2"></a>
    </div>
    <!-- page2 -->
    <div class="page2" v-else-if="page === 2">
      <img class="bgimg" src="./H5/page2.png">
      <div class="animat">
        <div id="p2_circle"></div>
        <div id="p2_path"></div>
        <div id="p2_title"></div>
        <div id="p2_upload"></div>
        <div id="p2_wave"></div>
        <div id="p2_light"></div>
      </div>
      <div class="uploadImg" :style="{backgroundImage: 'url(' + imgUrl + ')'}">
        <input type="file" accept="image/*" ref="inpFile" @change="upImg">
      </div>
      <a class="toPage3" @click.prevent="toPage3"></a>
    </div>
    <!-- page3 -->
    <div class="page3" v-else-if="page === 3">
      <img class="bgimg" src="./H5/page3.png">
      <div class="animat">
        <div id="p3_circle"></div>
        <div id="p3_path"></div>
        <div id="p3_title"></div>
        <div id="p3_email"></div>
        <div id="p3_wave"></div>
        <div id="p3_light"></div>
      </div>
      <a class="toPop1" @click.prevent="toPop1"></a>
      <!-- pop1 -->
      <div class="pop1_box bgimg" v-show="showPop1">
        <img class="bgimg" src="./H5/popBg1.png">

        <transition name="slide">
          <img class="bgborder" v-if="showPop1" src="./H5/border.png">
        </transition>

        <a class="toPop2" @click.prevent="toPop2"></a>
        <div class="conversation_box" ref="cvs_box">

          <transition-group name="fade">
            <div v-for="(v, i) in renderQs" :key="i">
              <div class="conversation other">
                <div class="avatar">
                  <img src="./H5/xiaohe39.png" alt="">
                </div>
                <div class="content">
                  <p>{{v.question}}</p>
                  <ul>
                    <li v-for="(v1, i1) in v.options">
                      <span @click="chooseOption(i, v1)">{{v1}}</span>
                    </li>
                  </ul>
                </div>
              </div>

              <transition name="fade" @after-enter="afterAnswer">
                <div class="conversation me" v-if="v.answer">
                  <div class="avatar">
                    <img src="./H5/xiongben.png" alt="">
                  </div>
                  <div class="content">
                    <p>{{v.answer}}</p>
                  </div>
                </div>
              </transition>
            </div>
          </transition-group>

        </div>
      </div>
      <!-- xiaohe loading -->
      <div class="xiaohe_loading" v-if="showLoading">
        <img src="./H5/pop1.png" alt="">
      </div>
      <!-- result popup -->
      <div class="result_pop" v-if="showResult">
        <img src="./H5/pop2.png" alt="">
        <a class="toPage4" @click.prevent="toPage4"></a>
      </div>
    </div>
    <div class="page4" v-else-if="page === 4" ref="poster">
      <!-- <img class="bgimg" src="./H5/04.png"> -->
      <img class="posterImg" ref="posterImg">
      <canvas id="cvs" ref="cvs"></canvas>
      <a class="again" @click.prevent="again"></a>
      <a class="renderposter" @click.prevent="renderposter"></a>
    </div>
  </div>
  <script src="./js/index.js"></script>
</body>

</html>
<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?189b36e08b329cba98211fa94afc844b";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>
